<template> 
	<div class="singleUploadLocal">
		<el-upload :action="localUploadUrl" :before-upload="beforeUpload" :multiple="false" :limit="maxCount"
			:headers="headers" :file-list="fileList" :show-file-list="showFile" :on-exceed="handleExceed"
			:on-remove="handleRemove" :on-success="handleUploadSuccess" :on-preview="handlePreview">
			<div class="row-me row-center">
				<el-button size="small" type="primary">点击上传</el-button>
				<div slot="tip" class="el-upload__tip margin-left20">{{message}}</div>
			</div>
		</el-upload>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="imageUrl" alt="">
		</el-dialog>
	</div>
</template>
<script>
	import {
		getToken,
	} from '@/utils/auth'
	export default {
		name: 'singleUploadLocal',
		props: {
			isPrivate: {
				type: Boolean,
				default: false
			},
			listType: {
				type: String,
				default: 'picture-card'
			},
			message: {
				type: String,
				default: '只能上传jpg/png文件，且不超过10MB'
			},
			isVideo: {
				type: Boolean,
				default: false
			},
			isFile: {
				type: Boolean,
				default: false
			},
			maxCount: {
				type: Number,
				default: 9
			},
			showFile: {
				type: Boolean,
				default: true
			},
			isAnnouncement: {
				type: Boolean,
				default: false
			},
			value: Array
		},
		computed: {
			imageUrl() {
				return this.value;
			},
			imageName() {
				if (this.value != null && this.value !== '') {
					return this.value.substr(this.value.lastIndexOf("/") + 1);
				} else {
					return null;
				}
			},
			fileList() {
				let fileList = [];
				if (this.value && this.value.length != 0) {
					for (let i = 0; i < this.value.length; i++) {
						fileList.push({
							url: this.value[i].url,
							name: this.value[i].name
						});
					}
				}
				return fileList;
			},
			// fileList() {
			// 	return [{
			// 		name: this.imageName,
			// 		url: this.imageUrl
			// 	}]
			// },
			showFileList: {
				get: function() {
					return this.value !== null && this.value !== '' && this.value !== undefined;
				},
				set: function(newValue) {}
			}
		},
		data() {
			return {
				dataObj: {
					policy: '',
					signature: '',
					key: '',
					ossaccessKeyId: '',
					dir: '',
					host: '',
					// callback:'',
				},
				dialogVisible: false,
				localUploadUrl: process.env.BASE_API + (this.isPrivate ? '/file/uploadPrivate' : '/file/upload'),
				headers: {
					Authorization: getToken(),
				},
				duration: ''
			};
		},
		methods: {
			handleExceed(files, fileList) {
				this.$message({
					message: '最多只能上传' + this.maxCount + '个文件',
					type: 'warning',
					duration: 1000
				});
			},
			// 上传之前
			beforeUpload(file) {
				if (this.isVideo) {
					if (file.type.split('/')[1] == 'mp4') {
						let that = this
						var url = URL.createObjectURL(file);
						var audioElement = new Audio(url);
						var duration;
						audioElement.addEventListener("loadedmetadata",
							function() {
								duration = parseInt(audioElement.duration); //时长为秒，取整          
								that.duration = duration
							});
						return true
					} else {
						this.$message({
							showClose: true,
							message: "请选择视频文件",
							type: 'error'
						})
						return false
					}
				}
				if (this.isFile) {
					let fileName = file.name
					let pos = fileName.lastIndexOf('.')
					let lastName = fileName.substring(pos, fileName.length)
					if (
						lastName.toLowerCase() !== '.zip' &&
						lastName.toLowerCase() !== '.rar' &&
						lastName.toLowerCase() !== '.xlsx' &&
						lastName.toLowerCase() !== '.xls' &&
						lastName.toLowerCase() !== '.doc' &&
						lastName.toLowerCase() !== '.docx' &&
						lastName.toLowerCase() !== '.pdf'
					) {
						this.$message.error('文件必须为.zip .rar .xlsx .xls .doc .docx .pdf类型')
						return false
					}

				}
			},
			emitInput(fileList) {
				if (this.isVideo) {
					let arr = []
					for (let i = 0; i < fileList.length; i++) {
						arr.push({
							url: fileList[i].url,
							duration: this.duration
						});
					}
					this.$emit('input', arr)
				} else if (this.isAnnouncement) {
					this.$emit('input', fileList)
				} else {
					let value = [];
					for (let i = 0; i < fileList.length; i++) {
						value.push(fileList[i].url);
					}
					this.$emit('input', value)
				}
			},
			handleRemove(file, fileList) {
				this.emitInput(fileList);
			},
			handlePreview(file) {
				// this.dialogVisible = true;
			},
			handleUploadSuccess(res, file) {
				this.showFileList = true;
				this.fileList.push({
					name: file.name,
					url: res.data
				});
				this.emitInput(this.fileList);
				this.$message({
					message: '上传成功',
					type: 'success',
					duration: 1000
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.singleUploadLocal /deep/ .el-upload {
		width: auto !important;
		height: auto !important;
		border: 0 !important;
		line-height: 0 !important;
	}
</style>